import Service from '../libs/service_0_0_6.js';

/**
 * HTML жлеент вкладки
 */
let tablePanel;

/**
 * На панели инструментов разработчика создать отдельную вкладку, метод create создает объект ExtensionPanel
 * https://developer.chrome.com/docs/extensions/reference/devtools_panels/#method-create
 * https://developer.chrome.com/docs/extensions/reference/devtools_panels/#type-ExtensionPanel
 */
chrome.devtools.panels.create("Panel Example", "icon.png", "../devtools/panel/panel.html",
	function (panel) {
		panel.onShown.addListener((extPanelWindow) => {
			tablePanel = extPanelWindow.document.querySelector('.container');
			console.log('Область видимости панели: Panel Example из скрипта devtools.js', this)

			let obj = Service.getObjectAllScoupe(chrome)
			console.log('obj', obj)
			let allKeys = Service.getObjectKeys(obj)
			console.log('allKeys', allKeys)
			let paths = allKeys.map(function (elem) {
				return elem.path
			})
			console.log('paths', paths)
			console.log(Service.groupPaths(paths))
		});
	});

/**
 * На панели инструментов разработчика создать панель слева в списке, создается объект ElementsPanel
 * https://developer.chrome.com/docs/extensions/reference/devtools_panels/#type-ElementsPanel
 */
chrome.devtools.panels.elements.createSidebarPane("Sidebar Elements Example (setPage)",
	function (sidebar) {
		let expression = 'function getTagsA() {' +
			'let a = document.querySelectorAll("a")\n' +
			'let urls = new Array()\n' +
			'for(var i = 0; i < a.length; i++) {\n' +
			'	urls.push(a[i].baseURI)\n' +
			'}\n' +
			'return JSON.parse(JSON.stringify(urls))\n' +
			'}' +
			'getTagsA()'
		sidebar.setExpression(
			expression,
			"All Tags 'a' from Page",
			function () {
				console.log('Выражение выполнено на панели Sidebar Sources Example')
			}
		)
	}
);

/**
 * На панели инструментов разработчика создать панель слева в списке, создается объект ElementsPanel
 * https://developer.chrome.com/docs/extensions/reference/devtools_panels/#type-ElementsPanel
 */
chrome.devtools.panels.elements.createSidebarPane("Inner Object 'chrome'",
	function (sidebar) {
		let obj = Service.getObjectAllScoupe(chrome)
		sidebar.setObject(
			obj,
			"Содержимое объекта 'chrome'",
			function () {
				console.log('Добавлено содержимое параметра chrome')
			}
		)
	}
);

/**
 * На панели инструментов разработчика создать панель справа в списке, создается объект SourcesPanel
 * https://developer.chrome.com/docs/extensions/reference/devtools_panels/#type-SourcesPanel
 */
chrome.devtools.panels.sources.createSidebarPane("Sidebar Sources Example (setPage)",
	function (sidebar) {
		sidebar.setPage("../devtools/sidebars/sources/sidebar_sources.html");
		console.log('Область видимости панели: Sidebar Sources Example из скрипта devtools.js', sidebar)
	}
);

/**
 * На панели инструментов разработчика создать панель справа в списке, создается объект SourcesPanel
 * https://developer.chrome.com/docs/extensions/reference/devtools_panels/#type-SourcesPanel
 */
chrome.devtools.panels.sources.createSidebarPane("Sidebar Sources Example (setObject)",
	function (sidebar) {
		// Содержимое панели формируется из переданного Json
		sidebar.setObject(
			Service.getLocalAndGlobalVariables(sidebar, true),
			'Local Variables for object: sidebar',
			function () {
				console.log('Параметры добавлены на панель Sidebar Sources Example')
			}
		)
		console.log('Область видимости панели: Sidebar Sources Example из скрипта devtools.js', sidebar)
	}
);

/**
 * На панели инструментов разработчика создать панель справа в списке, создается объект SourcesPanel
 * https://developer.chrome.com/docs/extensions/reference/devtools_panels/#type-SourcesPanel
 */
chrome.devtools.panels.sources.createSidebarPane("Sidebar Sources Example (setExpression)",
	function (sidebar) {
		// Выполняемый скрипт имеет доступ к локальным объектам веб-приложения, так же как и 
		// inject_script.js и скрипт самого приложения.
		let expression = `function getLocalAndGlobalVariables(inspectObject, onlyLocal) {
			function isObject(value) {
				return (typeof value === 'object' && value !== null && !Array.isArray(value))
			}
			const iframe = window.document.createElement("iframe");
			iframe.src = "about:blank";
			let browserGlobals = {}
		
			if (document.head) {
				window.document.head.appendChild(iframe);
				browserGlobals = Object.keys(iframe.contentWindow);
				window.document.head.removeChild(iframe);
			} else if (document.documentElement) {
				window.document.documentElement.appendChild(iframe);
				browserGlobals = Object.keys(iframe.contentWindow);
				window.document.documentElement.removeChild(iframe);
			}
			let runtimeGlobals = {}
			Object.keys(inspectObject).forEach(key => {
				if (browserGlobals.includes(key) !== onlyLocal) {
					let typeValue;
					if (isObject(inspectObject[key])) {
						typeValue = 'object'
						// TODO Подумать о рекурсивном обходе текущего объекта
						if (Object.getOwnPropertyNames(inspectObject[key]).length !== 0) {
							// console.log(key, Object.getOwnPropertyNames(inspectObject[key]))
						}
					} else if (Array.isArray(inspectObject[key])) {
						typeValue = 'array'
					} else if (inspectObject[key] === null) {
						typeValue = null
					} else if (inspectObject[key] === undefined) {
						typeValue = "undefined"
					} else {
						typeValue = typeof inspectObject[key]
					}
					runtimeGlobals[key] = { name: key, type: typeValue }
				}
			})
			return runtimeGlobals
		}
		getLocalAndGlobalVariables(window, true)`
		// Содержимое панели формируется из результата выполнения выражения на странице
		sidebar.setExpression(
			expression,
			'Local Variables for object: window',
			function () {
				console.log('Выражение выполнено на панели Sidebar Sources Example')
			}
		)
		console.log('Область видимости панели: Sidebar Sources Example из скрипта devtools.js', sidebar)
	}
);